<template>
<div class="left-box">
    <div class="search-wrap search-inpt">
        <el-input clearable placeholder="搜索" v-model="filterText">
            <i slot="prefix" class="iconfont icon-sousuo"></i>
        </el-input>
    </div>
    <div class="scroll-bar">
        <el-tree default-expand-all @node-expand="nodeExpand" @node-collapse="nodeCollapse" v-loading="loading" element-loading-background="#f5f5f5" :data="treeData" :filter-node-method="filterNode" ref="tree">
            <span class="node-span-wrap" slot-scope="{data}">
                <el-tooltip :open-delay="1000" :enterable="false" effect="dark" :content="data.name" placement="bottom">
                    <span class="tree-node-span" :draggable="getChilren(data)" @dragover.prevent @dragstart="dragstart($event, data.data)" :class="{'is-component': getChilren(data)}">
                        <i class="tree-node-icon" :style="{color: colors[data.iconType]}" :class="`iconfont ${data.iconType}`"></i>
                        <span>{{data.name}}</span>
                    </span>
                </el-tooltip>
            </span>
        </el-tree>
    </div>
</div>
</template>

<script>
import {
    list2Tree,
    colors
} from '@/js/tool'
import {
    mapGetters
} from 'vuex'
export default {
    name: 'ComponentList',
    data () {
        return {
            colors,
            loading: false,
            filterText: '',
            treeData: []
        }
    },
    watch: {
        filterText (val) {
            this.$refs.tree.filter(val)
        }
    },
    computed: {
        ...mapGetters({
            projectId: 'common/getProjectId'
        })
    },
    created () {
        this.init()
    },
    methods: {
        getChilren (data) {
            return !data.children || data.children.length === 0
        },
        nodeCollapse (item) {
            if (item.isFolder) {
                item.iconType = 'icon-catalog-close'
            }
        },
        nodeExpand (item) {
            if (item.isFolder) {
                item.iconType = 'icon-catalog-open'
            }
        },
        transformTree (catalogs, modules) {
            for (let item of modules) {
                item.id = item.moduleCode
                item.label = item.moduleName
                item.parentId = item.catalogId
            }
            for (let item of catalogs) {
                item.id = item.catalogId
                item.label = item.catalogName
                item.parentId = item.parentCatalogId
            }
            let allNode = catalogs.concat(modules)
            return list2Tree(allNode, 'parentId', 'id', 'label', -1)
        },
        init () {
            this.loading = true
            const parmas = {
                keyword: '',
                projectId: this.projectId
            }
            this.$post('/experiment/catalog/queryModuleCatalog', parmas).then(res => {
                if (res) {
                    const { catalogs, modules } = res
                    this.treeData = this.transformTree(catalogs, modules)[0].children // 去除根目录
                }
            }).finally(() => {
                this.loading = false
            })
        },
        dragstart (e, item) {
            e.dataTransfer.setData('item', JSON.stringify(item))
        },
        filterNode (value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        }
    }
}
</script>
